<template>
  <Common>
    <template v-slot:top>
      <el-form
        :inline="true"
        :model="form"
        class="demo-form-inline"
        size="medium "
      >
        <el-form-item label="线缆类型:">
          <el-input
            v-model="form.cableClass"
            placeholder="请输入线缆类型"
          ></el-input>
        </el-form-item>
        <el-form-item label="规格型号:">
          <el-input
            v-model="form.cableModel"
            placeholder="请输入规格型号"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="长度单位:">
          <el-input
            v-model="form.lengthUnit"
            placeholder="请输入长度单位"
          ></el-input>
        </el-form-item>
        <el-form-item label="重量单位:">
          <el-input
            v-model="form.weightUnit"
            placeholder="请输入重量单位"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="生产日期:">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            @click="selectData"
            icon="el-icon-search"
            >查询</el-button
          >
          <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-form :inline="true" class="demo-form-inline" size="medium ">
        <el-form-item>
          <el-button type="success" icon="el-icon-plus" @click="add"
            >新增</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            :disabled="multiple.length < 1"
            @click="del(1)"
            >删除</el-button
          >

          <el-upload
            class="upload-demo"
            ref="upload"
            :action="action"
            accept=".xlsx"
            style="display: inline-block; margin: 0px 10px"
            :show-file-list="false"
            :before-upload="beforeUpload"
            :on-change="change"
            :on-progress="progress"
            :disabled="loading2"
          >
            <!-- <el-button
              type="info"
              icon="el-icon-upload2"
              :loading="loading2"
              @click="uploadFile"
              >导入</el-button
            > -->
          </el-upload>
          <el-button
            type="info"
            icon="el-icon-upload2"
            :loading="loading2"
            @click="uploadFile"
            >导入</el-button
          >
          <el-button
            type="warning"
            icon="el-icon-download"
            v-disable-click="3"
            @click="deport"
            >导出</el-button
          >
        </el-form-item></el-form
      >
    </template>
    <template v-slot:table>
      <el-table
        :data="tableData"
        v-loading="loading"
        height="90%"
        border
        style="width: 100%"
        @selection-change="handleSelection"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="cableClass" label="线缆类型"> </el-table-column>
        <el-table-column prop="cableModel" label="规格型号"> </el-table-column>
        <el-table-column prop="lengthUnit" label="长度单位"> </el-table-column>
        <el-table-column prop="weightUnit" label="重量单位"> </el-table-column>
        <el-table-column prop="prodDate" label="生产日期"> </el-table-column>
        <el-table-column prop="producer" label="生产厂家"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="160">
          <template slot-scope="scope">
            <el-link
              :underline="false"
              type="primary"
              @click="edit(scope.row)"
              icon="el-icon-edit"
              >编辑</el-link
            >
            <el-link
              style="margin: 0px 16px"
              type="danger"
              :underline="false"
              @click="del(scope.row)"
              icon="el-icon-delete"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-slot:pagination>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 50, 100, 200]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <AddDataVue ref="addEdit" @getTable="getTable"></AddDataVue>
    </template>
  </Common>
</template>

<script>
import Common from "@/components/common.vue";
import AddDataVue from "./addData.vue";
import { getCable, delCable } from "@/common/api";
import { formatISODate } from "@/untils/trans";
export default {
  name: "Index",
  props: {},
  components: { Common, AddDataVue },
  computed: {
    action() {
      if (process.env.NODE_ENV == "development") {
        if (this.isCover) {
          return "http://192.168.10.87:8077/api/cableType/importV2";
        } else {
          return "http://192.168.10.87:8077/api/cableType/import";
        }
      } else {
        const host = window.location.protocol + "//" + window.location.host;
        if (this.isCover) {
          return `${host}/api/cableType/importV2`;
        } else {
          return `${host}/api/cableType/import`;
        }
      }
    },
  },
  data() {
    return {
      form: {
        cableClass: "",
        cableModel: "",
        // lengthUnit: "",
        // weightUnit: "",
      },
      time: [],
      tableData: [],
      loading: false,
      loading2: false,
      pageNum: 1,
      pageSize: 10,
      currentPage: 1,
      total: 0,
      multiple: [],
      isCover: false, //是否覆盖
    };
  },
  mounted() {},
  created() {
    this.getTable();
  },
  methods: {
    handleSizeChange(e) {
      this.pageSize = e;
      this.getTable();
    },
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getTable();
    },

    selectData() {
      this.pageNum = 1;
      this.getTable();
    },
    getTable() {
      this.loading = true;
      let param = {
        ...this.form,
        startTime: this.time[0] ? formatISODate(this.time[0]) : "",
        endTime: this.time[1] ? formatISODate(this.time[1]) : "",
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      getCable(param)
        .then((res) => {
          this.loading = false;
          if (res.success) {
            this.tableData = res.data.records;
            this.total = res.data.total;
            this.tableData.forEach((i, index) => {
              i.index = (this.pageNum - 1) * this.pageSize + index + 1;
            });
          } else {
            this.$errorMsg(res.message);
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    edit(item) {
      this.$refs.addEdit.dialogFormVisible = true;
      this.$refs.addEdit.type = "edit";
      this.$refs.addEdit.getDetail(item.id);
    },
    del(item) {
      let str = "";
      if (item == "1") {
        //多个
        str = "是否确认删除选中的数据?";
      } else {
        //单个
        str = "是否确认删除此数据?";
      }
      this.$confirm(str, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let param = {
            id: item == "1" ? this.multiple.join(",") : item.id,
          };
          console.log(param, "0000");
          delCable(param).then((res) => {
            if (res.success) {
              this.$successMsg("删除成功");
              this.getTable();
            } else {
              this.$errorMsg(res.message);
            }
          });
        })
        .catch(() => {});
    },

    deport() {
      const { cableClass, cableModel } = this.form;
      let startTime = this.time[0] ? formatISODate(this.time[0]) : "";
      let endTime = this.time[1] ? formatISODate(this.time[1]) : "";
      let str = `cableClass=${cableClass}&cableModel=${cableModel}&startTime=${startTime}&endTime=${endTime}&pageNum=${this.pageNum}&pageSize=${this.pageSize}`;
      if (process.env.NODE_ENV == "development") {
        window.location.href = `http://192.168.10.87:8077/api/cableType/export?${str}`;
      } else {
        const host = window.location.protocol + "//" + window.location.host;
        window.location.href = `${host}/api/cableType/export?${str}`;
      }
    },

    reset() {
      let arr = Object.keys(this.form);
      arr.forEach((i) => (this.form[i] = ""));
      this.time = [];
    },
    add() {
      this.$refs.addEdit.dialogFormVisible = true;
      this.$refs.addEdit.type = "add";
    },
    handleSelection(val) {
      this.multiple = val.map((i) => i.id);
    },
    beforeUpload(e) {
      console.log(e, "00000");
      //   return false;
    },
    progress() {
      this.loading2 = true;
    },
    change(e) {
      console.log(e, "9999");
      if (e.response?.success == false) {
        this.loading2 = false;
        this.$errorMsg(e.response?.message);
        return;
      }
      if (e.response?.success) {
        this.loading2 = false;
        this.$successMsg("上传成功");
      }
    },

    uploadFile() {
      this.$confirm("是否覆盖已上传的文件？", "提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "是",
        cancelButtonText: "否",
      })
        .then(() => {
          this.isCover = true;
          this.$refs["upload"].$refs["upload-inner"].handleClick();
        })
        .catch(() => {
          this.isCover = false;
          this.$refs["upload"].$refs["upload-inner"].handleClick();
        });
    },
  },
};
</script>


<style lang="scss" scoped>
</style>